<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div class="header" style="width: 100%">
        <span>
          <el-icon color="#3B98F7" :size="25" style="top: 5px">
            <Coin style="font-size: 25px" />
          </el-icon>
        </span>
        <span class="header-title"> 核心数据展示 </span>
        <span class="header-description"> 以下数据实时更新,部分信息为昨日离线数据 </span>
      </div>
      <el-row :gutter="20" class="pt20">
        <el-col :span="25" :offset="0" class="box-card">
          <div class="statistic-card">
            <el-statistic :value="oldData.personCount">
              <template #title>
                <div class="statistic-title">在册工人总数</div>
              </template>
            </el-statistic>
            <div class="statistic-footer">
              <el-divider />
              <div class="footer-item">
                <span>西藏籍工人占比</span>
                <span style="color: #3b98f7"> {{ oldData.personXZRatio }}% </span>
              </div>
              <div class="footer-item">
                <span>西藏籍工人总数</span>
                <span style="color: #f39423"> {{ oldData.personXZCount }} </span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="25" :offset="0" class="box-card">
          <div class="statistic-card">
            <el-statistic :value="oldData.numberAttendees">
              <template #title>
                <div class="statistic-title">参与考勤人数</div>
              </template>
            </el-statistic>
            <div class="statistic-footer">
              <el-divider />
              <div class="footer-item">
                <span>出勤率</span>
                <span style="color: #3b98f7"> {{ oldData.attendanceRatio }}% </span>
              </div>
              <div class="footer-item">
                <span>缺勤人数</span>
                <span style="color: #f39423"> {{ oldData.absenceAttendance }} </span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="25" :offset="0" class="box-card">
          <div class="statistic-card">
            <el-statistic :value="oldData.managerCount">
              <template #title>
                <div class="statistic-title">现场管理人数</div>
              </template>
            </el-statistic>
            <div class="statistic-footer">
              <el-divider />
              <div class="footer-item">
                <span>总监理工程师人数</span>
                <span style="color: #f39423"> {{ oldData.superviseCount }} </span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="25" :offset="0" class="box-card">
          <div class="statistic-card">
            <el-statistic :value="0">
              <template #title>
                <div class="statistic-title">工资代发总金额</div>
              </template>
            </el-statistic>
            <div class="statistic-footer">
              <el-divider />
              <div class="footer-item">
                <span>总代发人次</span>
                <span style="color: #3b98f7"> {{ oldData.paymentPersonCount }} </span>
              </div>
              <div class="footer-item">
                <span>线上代发金额</span>
                <span style="color: #f39423">
                 0
                </span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="25" :offset="0" class="box-card">
          <div class="statistic-card">
            <el-statistic :value="oldData.contractCount">
              <template #title>
                <div class="statistic-title">合同总数</div>
              </template>
            </el-statistic>
            <div class="statistic-footer">
              <el-divider />
              <div class="footer-item">
                <span>已签订合同人数</span>
                <span style="color: #3b98f7"> {{ oldData.signPersonCount }} </span>
              </div>
              <div class="footer-item">
                <span>签订合同占比</span>
                <span style="color: #f39423"> {{ oldData.signContractRatio }}% </span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { HomeStatistic } from "@/api/dashboard/types";

interface MainData {
  [x: string]: any;
  // ... 其他属性
  absenceAttendance: number;
  attendanceRatio: number;
  managerCount: number;
  numberAttendees: number;
  onlinePaymentAmount: number;
  paymentPersonCount: number;
  personCount: number;
  personXZCount: number;
  personXZRatio: number;
  signContractRatio: number;
  contractCount: number;
  signPersonCount: number;
  superviseCount: number;
  totalPaymentAmount: number;
}
interface ComponentProps {
  statisticData: HomeStatistic;
}

const props = defineProps<ComponentProps>();

const { statisticData } = toRefs(props);
const oldData = ref<MainData>({
  absenceAttendance: 0,
  attendanceRatio: 0,
  managerCount: 0,
  numberAttendees: 0,
  onlinePaymentAmount: 0,
  paymentPersonCount: 0,
  personCount: 0,
  personXZCount: 0,
  personXZRatio: 0,
  signContractRatio: 0,
  contractCount: 0,
  signPersonCount: 0,
  superviseCount: 0,
  totalPaymentAmount: 0,
});

//实现数字动态变化效果
const numAdd = function (max: number, feild: string) {

};

const initForm = () => {
  numAdd(statisticData.value.absenceAttendance ?? 0, "absenceAttendance");
  numAdd(statisticData.value.attendanceRatio ?? 0, "attendanceRatio");
  numAdd(statisticData.value.managerCount ?? 0, "managerCount");
  numAdd(statisticData.value.numberAttendees ?? 0, "numberAttendees");
  numAdd(statisticData.value.onlinePaymentAmount ?? 0, "onlinePaymentAmount");
  numAdd(statisticData.value.paymentPersonCount ?? 0, "paymentPersonCount");
  numAdd(statisticData.value.personCount ?? 0, "personCount");
  numAdd(statisticData.value.personXZCount ?? 0, "personXZCount");
  numAdd(statisticData.value.personXZRatio ?? 0, "personXZRatio");
  numAdd(statisticData.value.signContractRatio ?? 0, "signContractRatio");
  numAdd(statisticData.value.contractCount ?? 0, "contractCount");
  numAdd(statisticData.value.signPersonCount ?? 0, "signPersonCount");
  numAdd(statisticData.value.superviseCount ?? 0, "superviseCount");
  numAdd(statisticData.value.totalPaymentAmount ?? 0, "totalPaymentAmount");
};
watchEffect(() => {
  if (statisticData.value) {
    initForm();
  }
});
</script>

<style lang="scss" scoped>
.pt20 {
  padding-top: 20px;
}

.header-title {
  font-family: SourceHanSansCN;
  font-size: 16px;
  color: #101010;
  font-weight: 600;
}

.header-description {
  font-size: 14px;
  color: #a3a3a3;
}

:global(h2#card-usage ~ .example .example-showcase) {
  background-color: var(--el-fill-color) !important;
}

:deep().el-col-25 {
  width: 20%;
}

:deep().el-statistic__head {
  padding-top: 25px;
  font-size: 14px;
  color: rgb(163, 163, 163);
}

:deep().el-statistic__content span {
  font-size: 16px;
  color: rgb(16, 16, 16);
  font-weight: bolder;
}

.statistic-card {
  height: 100%;
  padding: 20px;
  border-radius: 10px;
  background-color: rgba(247, 248, 250, 1);
}

.statistic-title {
  display: inline-flex;
  align-items: center;
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: left;
}

.statistic-footer .footer-item span {
  font-size: 12px;
  color: #a3a3a3;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}
:deep(.el-statistic__number) {
  display: inline-block;
  animation: slide-in-blurred-top 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}
:deep() .footer-item {
  min-width: 100px;
}
</style>
